<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击地图 移动图标（只保留当前点击）+ 获取点的经纬度 + 名称</title>
</head>
<body>
    <div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqsn1M2pSssz9OrldUVHP4ELTDToelVYw" defer></script>
    <script>
        // 根据网络定位
        let geolocation = 'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyCqsn1M2pSssz9OrldUVHP4ELTDToelVYw';
        (function() {
            let xhr;
            xhr = new XMLHttpRequest();
            xhr.open('POST', geolocation);
            xhr.onload = function () {
                let response = JSON.parse(this.responseText);
                uluru = response.location; // 获取经纬度
                initMap(uluru); // 调用地图
            }
            xhr.send();
        })();

        // 地图
        function initMap(uluru) {
            let map = new google.maps.Map(document.getElementById("map"), {
                center: uluru,
                zoom: zoom
            });

            // 点击获取对应google地图上的坐标
            google.maps.event.addListener(map, 'click', function (event) {
                // 声明对象
                let obj = {};
                let latStr = parseFloat(event.latLng.lat());
                let lngStr = parseFloat(event.latLng.lng());

                console.log(obj);
            })
        }


        window.onload = function(){
            initMap();
        };
    </script>
</body>
</html>